<template>
	<div>
		<u-popup width="600" v-model="wheelDia" mode="center" @close="wheelDiaClose" border-radius="20">
			<view class="wheel-box u-text-center">
				<view class="title fw5 fs40 c3">
				 扫一扫付款(元)
				</view>
				<view class="price fwb fs34">
					{{price}}
				</view>
				<image :src="codeImg" style="width: 400rpx;height: 400rpx;margin: 40rpx auto;margin-bottom: 20rpx;"></image>
				<sc-qrcode class="sc-code" :val="val" cid="qrcode1" ref="qrcode" />
				<view class=" fw5 fs26 c3 mb30">
				支付微信/支付宝支付
				</view>
				<view class=" fw5 fs26 c6 mb30">
					{{$moment(new Date()).format('YYYY-MM-DD')}}
				</view>
				<view class=" fw5 fs26  mb30 price" v-if="qrLimitTime">
					请在{{qrLimitTime}}前完成支付
				</view>
			<!-- 	<u-button :hair-line="false"
				class="mt30"
				     @click="handleSubmit"
					:custom-style="{fontSize: '28rpx', color: '#ffffff',width: '245rpx', height: '68rpx',background: '#47A848','border':'#47A848'}"
					shape='circle' ripple>确定</u-button> -->
			</view>
		</u-popup>
	</div>
</template>

<script>
	import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			price: {
				type: [Number,String],
				default: 0.00
			},
			qrLimitTime: {
				type: [Number,String],
				default:''
			},
		},
		watch: {
			value: {
				immediate: true,
				deep: true,
				handler(e) {
					this.wheelDia = e
				},
		
			}
		},
		data() {
			return{
				wheelDia: false,
				codeImg:'',
				val:''
			}
		},
		mounted() {
		},
		methods:{
			qrcodeInit(e) {
				this.val = e
				console.log(this.val)
				let that = this
				this.$nextTick(() =>{
					this.$refs.qrcode._makeCode().then(res => {
						console.log(res)
						that.codeImg = res
					})
				})
			
			},
			handleSubmit(){
				this.wheelDiaClose()
			},
			wheelDiaClose(){
				this.wheelDia= false
				this.$emit('input',false)
			}
		}

	}
</script>

<style lang="scss" scoped>

.wheel-box {
	padding: 30rpx;
	background-color: white;
	.status-img{
		width:290rpx ;
		height:228rpx ;
	}
	.title{
		font-family: PingFangSC-Medium-, PingFangSC-Medium;
		color: #333333;
		margin-bottom: 15rpx;
	}
		.desc{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-bottom: 30rpx;
		}
	}
	.sc-code {
		position: fixed !important;
		left: 10000rpx;
		top: 10000rpx;
		z-index: -1;
		opacity: 0;
	}
</style>